<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 数据代理： 通过一个对象代理对另一个对象的中属性的操作（读/写）

        // data(){
        //     return {
        //         msg:'hello world '
        //     }
        // }
        // this.msg ===> 

        // this.msg  ==>  this._data.msg ==> this.$data.msg ==> {
        //         msg:'hello world '
        //     }
        // this这个对象，代理了 data中return出来的对象
        // this._data这个对象，代理了 data中return出来的对象

        let obj = {}
        let obj2 = {x:100, y:200}

        // obj本身目前没有x属性，没有y属性 ，
        // 想要，访问obj.x  ==> obj2.x 
        //      访问obj.y  ==> obj2.y

                // obj.x = '某个值'  ==> obj2.x的值

        // obj.x ==>  自动调用getter函数

        // Object.defineProperty() ==> 只针对一个属性做监听
            // {msg:'hi',age:18}

        Object.defineProperty(obj, 'x', {
            configurable:true,
            enumerable:true,
            //value + writable  ==> 不能 和  get 和set共存 
            get: function(){
                console.log('getter函数被调用了')
                return obj2.x 
            },
            set(newVal){
                // 处理逻辑
                console.log('setter函数被调用了')
                // obj.x = '某个值'
                obj2.x = newVal
            }
        })

        // 我们现在让 obj 这个对象，代理了 obj2的x属性
        
        // 让obj这个对象  ==> 代理 obj2这个对象 



    </script>
</body>
</html>